<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/nybike/js/echarts.min.js"></script>
    <script type="text/javascript" src="/nybike/js/jquery-3.5.1.min.js"></script>
</head>
<body>
    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">

        var statueUrl='https://gbfs.citibikenyc.com/gbfs/en/station_status.json'
        var empty_num=0;
        let station_num=0;
        //发送请求
        $.get(statueUrl,function (result) {
            //收到相应数据
            console.log('收到相应数据:',result)
            let stations=result.data.stations
            for (i in stations){
                let station = stations[i]
                let nba=station.num_bikes_available
                if (nba==0) empty_num++;
                station_num++;
            }
            draw();
        })
        function draw() {
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('main'));

            // 指定图表的配置项和数据
            // var option1 = {
            //     title: {
            //         text: 'ECharts 入门示例'
            //     },
            //     tooltip: {},//提示
            //     legend: {//图例
            //         data:['销量','库存']//数据集的名称
            //     },
            //     xAxis: {
            //         data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            //     },
            //     yAxis: {},
            //     series: [{
            //         name: '销量',
            //         type: 'bar',
            //         data: [5, 20, 36, 10, 10, 20]
            //     },{
            //         name: '库存',
            //         type: 'bar',
            //         data: [11, 25, 66, 22, 14, 24]
            //     }]
            // };
            let rate=empty_num/station_num*100;
            rate=rate.toFixed(2)
            let option2 = {
                title: {
                    text:'空站点数量'
                },
                tooltip: {
                    formatter: '{a} <br/>{b} : {c}个'
                },
                series: [{
                    name: 'Pressure',
                    type: 'gauge',
                    max:station_num,
                    detail: {
                        formatter: rate+'%'
                    },
                    data: [{
                        value: empty_num
                    }]
                }]
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option2);
        }

    </script>
</body>
</html>